The DHTML Edit Control

Relatively few Visual Basic programmers are aware that Microsoft has made publicly available part of the technology on which the DHTMLPage designer is based, in the form of a DHTML Edit control. This control can be freely downloaded from the Microsoft Web site at http://www.microsoft.com/workshop/author/dhtml/edit /download.asp. (The site also contains a version that works with earlier versions of Internet Explorer.) The control includes all the functionality found in the rightmost pane of the DHTMLPage designer and so makes it possible for you to add a Dynamic HTML editor to your application.

Run the EXE file you've downloaded and select a target installation directory. At the end of the unpacking process, you'll find several files, including the complete documentation and a few interesting samples. You'll find also some include files, but they're of no interest to Visual Basic programmers. (The package includes also a version for the C++ language)

Run the Visual Basic IDE, press the Ctrl+T key to bring up the list of installed ActiveX controls, and select the new DHTML Edit Control component. This operation adds two new icons to the Toolbox window. Each icon corresponds to a different flavor of the control: One is the complete version, the other is marked as Safe For Scripting and Safe For Initialization and doesn't permit a few operations, for example, saving files. In general, you'll use the former version in your Visual Basic applications and the latter one in HTML pages or in DHTML applications that run inside a browser.

To get a feeling of what this control gives you, drop an instance of it on a form and run the program. You can type any text in the control's window as if the window were a standard TextBox. Unlike a standard TextBox control, however, you can format the selected text with bold, italic, and underline attributes (using the Ctrl+B, Ctrl+I and Ctrl+U key combinations, respectively). The control supports many other operations through shortcut keys: You can insert a hyperlink by pressing the Ctrl+L key combination, increase and decrease paragraph indentation by using the Ctrl+T and Ctrl+Shift+T key combinations, and display the Find dialog box by using the Ctrl+F key combination. The control supports also multilevel undo and redo features, by means of the Ctrl+Z and Ctrl+Y key combinations, and some sophisticated drag-and-drop capabilities for moving elements on the page.

The rest of the DHTML Edit control's functionality, however, can be reached only through its methods and properties. For example, you can create a new document, load an existingHTM file, or save the contents of the control to a file using the NewDocument, LoadDocument, and SaveDocument methods, respectively. (The latter two methods can also display a common dialog box for file selection.). Or you can load an HTM file from a URL using the LoadURL method, as here:

DHTMLEdit1.LoadURL = "http://www.vb2themax.com/index.htm"

You can also load and save HTML source without using a file, by assigning a string to the DocumentHTML property. This property gives you an effective way to store and retrieve a formatted document stored in a database field or to build a sophisticated DHTML editor that lets you enter plain HTML source code, a feature that's missing even in the DHTMLPage designer. As an exercise, you might revise the DHTMLEd.vbp project on the companion CD to use the DHTML Edit control instead of the WebBrowser control. Just a warning: Using the DocumentHTML property raises an error if a document is being loaded, a condition that you can test using the Busy property.

The DHTML Edit control can also work in preview mode, in which you see how the page you're building will appear inside a browser. You can switch to and from preview mode by setting the BrowserMode property to True or False, respectively.

The DHTML Edit control supports formatting commands in an unusual way. Instead of exposing dozens of properties or methods, one for each available option, you issue commands through the all-in-one ExecCommand method, whose first argument is a constant that tells the method what to do. I counted over 50 different commands, for changing text attributes, inserting or deleting table cells, performing cut-and-paste operations, changing the z-order or the alignment of an element, and so on. For example, see how you can change the font size of the current selected text:

' The second argument suppresses the default dialog box. ' The third argument is the new font's size. DHTMLEdit1.ExecCommand DECMD_SETFONTSIZE, OLECMDEXECOPT_DONTPROMPTUSER, fs

The DOM property of the DHTML Edit control returns a reference to the Document object of the page hosted in the control. Thanks to this property, you can do virtually anything to the document being edited. For example, you can change the background color of the HTML page with this code:

DHTMLEdit1.DOM.bgColor = "red"

The DHTML Edit control also exposes several events that let you react to actions of the user who's editing the document. The most important event is DisplayChange, which fires any time the user selects a new element or simply moves the insertion point. You typically react to this event by updating a status bar and the state of the buttons on a toolbar. The DocumentComplete event fires when the page has been completely loaded and is ready for editing. The ShowContextMenu and the ContextMenuAction events let you decide what appears when users right-click on the control and what happens when they select a menu command.

I was surprised by how many sample programs are provided with this control. VBEdit.vbp is a complete WYSIWYG editor for Dynamic HTML pages, and its source code provides a great occasion for you to see how you can exploit the features of the DHTML Edit control. (See Figure 19-21.) The VBDom.vbp project shows you how to access the Document Object Model of the document hosted in the control. Finally, in the Web subdirectory you'll find many examples of HTML pages that host the DHTML Edit control.

Figure 19-21. The VBEdit.vbp sample application.

This chapter has been a long one, but we had a lot of ground to cover. You've seen what HTML and Dynamic HTML are, how you can exploit the power of the new HTMLPage designer, and how you can take advantage of RDS and remote Automation over the Internet. You're now ready for the final leap: You can build Visual Basic applications that run inside a Web server. This topic is covered in the next chapter.